<template>
	<el-table :data="courses" style="width: 100%">
		<el-table-column type="index" label="排序" width="50"></el-table-column>
		<el-table-column
			prop="courseName"
			label="课程名称"
			width="180"
		></el-table-column>
		<el-table-column label="课程封面" width="200">
			<template #default="scope">
				<el-upload
					:on-success="handleCoverUploadSuccess(scope.row)"
					:file-list="
						scope.row.cover
							? [{ name: '已上传封面', url: scope.row.cover }]
							: []
					"
					accept="image/*"
					list-type="picture-card"
					:auto-upload="false"
				>
					<img
						v-if="scope.row.cover"
						:src="scope.row.cover"
						class="uploaded-cover"
					/>
					<el-button v-else type="primary">点击上传</el-button>
				</el-upload>
			</template>
		</el-table-column>
		<el-table-column prop="credits" label="学分" width="80"></el-table-column>
		<el-table-column label="内容类型" width="150">
			<template #default="scope">
				<el-select v-model="scope.row.contentType" placeholder="请选择">
					<el-option label="视频" value="video"></el-option>
					<el-option label="文档" value="document"></el-option>
					<el-option label="其他" value="other"></el-option>
				</el-select>
			</template>
		</el-table-column>
		<el-table-column label="内容" width="250">
			<template #default="scope">
				<div v-if="scope.row.contentProgress !== undefined">
					<el-progress :percentage="scope.row.contentProgress"></el-progress>
				</div>
				<div v-else>
					<el-upload
						:on-success="handleContentUploadSuccess(scope.row)"
						:file-list="scope.row.content ? [{ name: scope.row.content }] : []"
						:auto-upload="false"
					>
						<el-button type="primary">上传内容</el-button>
					</el-upload>
				</div>
			</template>
		</el-table-column>
	</el-table>
</template>

<script lang="tsx" setup>
interface Course {
	courseName: string;
	cover: string | null;
	credits: number;
	contentType: string;
	content: string | null;
	contentProgress?: number;
}

const courses = defineProps<{
	courses: Course[];
}>();
// const courses = ref<Course[]>([
//   { courseName: '课程1', cover: null, credits: 3, contentType: '', content: null },
//   { courseName: '课程2', cover: null, credits: 2, contentType: '', content: null, contentProgress: 50 },
// ]);

const handleCoverUploadSuccess = (row: Course) => (file: File) => {
	row.cover = URL.createObjectURL(file.raw);
};

const handleContentUploadSuccess = (row: Course) => (file: File) => {
	row.content = file.name;
};
</script>

<style scoped>
.uploaded-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
</style>
